<template>
    <div>
        <el-form
            :inline="true"
            :model="teacher_query"
            class="demo-form-inline"
        >
            <el-form-item>
                <el-button
                    type="danger"
                    :icon="Plus"
                    @click="onAdd"
                >添加讲师</el-button>
            </el-form-item>

            <el-form-item label="ID">
                <el-input
                    v-model="teacher_query.id"
                    placeholder="请输入ID"
                    clearable
                />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input
                    v-model="teacher_query.name"
                    placeholder="请输入姓名"
                    clearable
                />
            </el-form-item>
            <el-form-item label="工作主题">
                <el-input
                    v-model="teacher_query.jobTitle"
                    placeholder="请输入工作主题"
                    clearable
                />
            </el-form-item>
            <el-form-item label="技术领域">
                <el-input
                    v-model="teacher_query.skilledField"
                    placeholder="请输入技术领域"
                    clearable
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onQuery"
                >查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onReload"
                >重置</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="dataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="讲师姓名"
                prop="name"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="handleUpdate(scope.$index, scope.row)"
                    >查看修改详情</el-button>
                    <el-popconfirm
                        title="确认删除?"
                        @confirm="handleDelete(scope.$index, scope.row)"
                    >
                        <template #reference>
                            <el-button
                                size="small"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            background
            layout="prev, pager, next"
            :total="selectData.count"
            :default-page-size="selectData.pagesize"
        />
    </div>

    <el-dialog
        v-model="dialogFormVisible"
        :title="Teacher.name"
        align-center
    >
        <el-form
            ref="TeacherForm"
            :model="Teacher"
            :rules="TeacherRules"
        >
            <el-form-item
                label="姓名"
                prop="name"
            >
                <el-input
                    v-model="Teacher.name"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="工作主题"
                prop="jobTitle"
            >
                <el-input
                    v-model="Teacher.jobTitle"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="技术领域"
                prop="skilledField"
            >
                <el-input
                    v-model="Teacher.skilledField"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="邮箱"
                prop="email"
            >
                <el-input
                    v-model="Teacher.email"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="手机号"
                prop="telephone"
            >
                <el-input
                    v-model="Teacher.telephone"
                    autocomplete="off"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="onSubmit('TeacherForm')"
                >
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script lang="ts">
import {
    getCurrentInstance, inject, reactive,
    onMounted, computed, toRefs, ref
} from "vue";
import { Teacher, TeacherRules, teacher_query, TeacherData, TeacherListData } from "@/utils/staff_TeacherValidators"
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { all } from "axios";
export default {
    setup() {
        const isAdd = ref(false);
        const dialogFormVisible = ref(false);
        const dialogDetailVisible = ref(false);
        //@ts-ignore
        const { ctx } = getCurrentInstance();
        const axios = inject('axios');
        const data = reactive(new TeacherListData());
        const curRow = ref<TeacherData>();

        onMounted(() => {
            getTeacherData();
        });

        const getTeacherData = () => {
            //@ts-ignore
            axios.get("/api/teacher/list",
                {
                    params: {
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200) {
                        data.TeacherList = res.data.data;
                        data.selectData.count = res.data.data.length;
                    } else {
                        alert("未请求到\"讲师\"信息");
                    }
                });
        };

        const dataList = reactive({
            comList: computed(() => {
                return data.TeacherList.slice(
                    (data.selectData.page - 1) * data.selectData.pagesize,
                    data.selectData.page * data.selectData.pagesize
                );
            }),
        });

        const currentChange = (page: number) => {
            data.selectData.page = page;
        };
        const sizeChange = (pagesize: number) => {
            data.selectData.pagesize = pagesize;
        };

        const handleUpdate = (index: number, row: TeacherData) => {
            console.log(index, row)
            dialogFormVisible.value = true;
            isAdd.value = false;
            curRow.value = row;
            //@ts-ignore
            Teacher.value = {
                email: curRow.value.email,
                jobTitle: curRow.value.jobTitle,
                name: curRow.value.name,
                skilledField: curRow.value.skilledField,
                telephone: curRow.value.telephone,
            };
        }
        const handleDelete = (index: number, row: TeacherData) => {
            //@ts-ignore
            axios.get("/api/teacher/delete",
                {
                    params: {
                        id: row.id,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        ElMessage({
                            message: '成功删除',
                            type: 'success',
                        })
                        location.reload();
                    } else {
                        alert("未请求到\"讲师\"信息")
                    }
                });
        }

        interface QParams {
            id?: string;
            jobTitle?: string;
            name?: string;
            skillField?: string;
        }

        const onQuery = () => {
            const { id, name, jobTitle, skilledField } = teacher_query;
            let q_params: QParams = {};
            var allowQuery = false;
            if (id != "" && /^[0-9]*$/.test(id)) {
                q_params.id = id;
                allowQuery = true;
            }
            if (name != "") {
                q_params.name = name;
                allowQuery = true;
            }
            if (jobTitle != "") {
                q_params.jobTitle = jobTitle;
                allowQuery = true;
            }
            if (skilledField != "") {
                q_params.skillField = skilledField;
                allowQuery = true;
            }
            if (allowQuery) {
                //@ts-ignore
                axios.get("/api/teacher/list",
                    {
                        params: q_params
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200) {
                            data.TeacherList = res.data.data;
                            data.selectData.count = res.data.data.length;
                        } else {
                            alert("未请求到\"讲师\"信息");
                        }
                    });
            }
        };

        const onSubmit = (formName: any) => {
            ctx.$refs[formName].validate((valid: boolean) => {
                if (valid) {
                    if (isAdd.value) {
                        //@ts-ignore
                        axios.post("/api/teacher/add", {
                            "account": null,
                            "email": Teacher.value.email,
                            "jobTitle": Teacher.value.jobTitle,
                            "name": Teacher.value.name,
                            "password": null,
                            "skilledField": Teacher.value.skilledField,
                            "telephone": Teacher.value.telephone,
                        }, {
                            headers: { 'Content-Type': 'application/json' }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.status === 200 && res.data.success === true) {
                                console.log(res);
                                location.reload();
                            }
                            else {
                                alert("提交失败！");
                                return false;
                            }
                        })
                    } else {
                        //@ts-ignore
                        axios.put("/api/teacher/update", {
                            "email": Teacher.value.email,
                            "id": curRow.value?.id,
                            "jobTitle": Teacher.value.jobTitle,
                            "name": Teacher.value.name,
                            "password": curRow.value?.password,
                            "skilledField": Teacher.value.skilledField,
                            "telephone": Teacher.value.telephone,
                        }, {
                            headers: { 'Content-Type': 'application/json' }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.status === 200 && res.data.success === true) {
                                console.log(res);
                                location.reload();
                            }
                            else {
                                alert("提交失败！");
                                return false;
                            }
                        })
                    }

                } else {
                    alert("表单校验不通过，提交失败!");
                    return false;
                }
            })
            dialogFormVisible.value = false;
        };

        const onAdd = () => {
            Teacher.value = {
                email: "",
                jobTitle: "",
                name: "",
                skilledField: "",
                telephone: "",
            };
            dialogFormVisible.value = true;
            isAdd.value = true;
        };

        const onReload = () => {
            location.reload();
        }

        return {
            ...toRefs(data), dialogFormVisible, dialogDetailVisible, curRow,
            dataList, currentChange, sizeChange, handleDelete, handleUpdate, onReload,
            onQuery, onSubmit, Teacher, TeacherRules, teacher_query, Plus, onAdd,
        }
    }
};
</script>
    
<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 160px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>